import React, { Component ,useState} from "react";
import { Form, Input, Modal, DatePicker, Upload, Button } from "antd";
import moment from "moment";
import "moment/locale/zh-cn";
moment.locale("zh-cn");

const { RangePicker } = DatePicker;
const { TextArea } = Input;
class AddActivityForm extends Component {
    state = {
        fileName:"",
        flag:0
    }
    render() {
        const { visible, onCancel, onOk, form, confirmLoading } = this.props;
        const { getFieldDecorator , setFieldsValue} = form;
        const formItemLayout = {
            labelCol: {
                sm: { span: 4 },
            },
            wrapperCol: {
                sm: { span: 16 },
            },
        };
        const disabledDate = current => current && current > moment().endOf('day') || current < moment().subtract(6, 'months');
        console.log(Upload)
        return (
            <Modal
                title="编辑"
                visible={visible}
                onCancel={onCancel}
                onOk={onOk}
                confirmLoading={confirmLoading}
            >
                <Form {...formItemLayout}>
                    {/* <Form.Item label="活动id:">
                        {getFieldDecorator("activityId", { rules: [{ required: true }] })(<Input />)}
                    </Form.Item> */}
                    <Form.Item label="活动全称:">
                        {getFieldDecorator("fullTitle", { rules: [{ required: true }] })(
                            <Input placeholder="全称" />
                        )}
                    </Form.Item>
                    <Form.Item label="活动简称:">
                        {getFieldDecorator("shortTitle", { rules: [{ required: true }] })(
                            <Input placeholder="简称" />
                        )}
                    </Form.Item>
                    <Form.Item label="活动时间:">
                        {getFieldDecorator("activityTime", {
                            rules: [{ required: true, message: "请选择时间!" }],
                    })(<RangePicker showTime disabledDate={this.disabledDate} format="YYYY-MM-DD" />)}
                    </Form.Item>
                    <Form.Item label="活动地点:">
                        {getFieldDecorator("activitySpot", { rules: [{ required: true }] })(<Input />)}
                    </Form.Item>
                    <Form.Item label="活动图片:">
                        {getFieldDecorator("activityImg", { rules: [{ required: false }] })(
                            <Input disabled={true}/>
                        )}
                        <Upload
                            action="https://api.hiehie.top:6001/upload/" //此处被编辑----------------------------------------------------------
                            listType="picture" 
                            maxCount={1}  
                            accept="image/gif,image/png,image/jpg,image/jpeg,image/svg,image/webp"
                            showUploadList={false}
                            
                            method="post" 
                            onChange={(f) => {
                                console.log(f)
                                if (f.file.status == 'done') {
                                    setFieldsValue({
                                        activityImg:f.file.response
                                    })
                                }
                            }} 
                            name='image' 
                            >
                            <Button >上传图片</Button>
                        </Upload>
                    </Form.Item>
                    <Form.Item label="活动内容:">
                        {getFieldDecorator("activityContent", { rules: [{ required: true }] })(
                            <TextArea rows={4} placeholder="请输入活动内容" />
                        )}
                    </Form.Item>
                </Form>
            </Modal>
        );
    }
}

export default Form.create({ name: "AddActivityForm" })(AddActivityForm);
